<!-- 公益数据 -->
<template>
  <div id="record">
    <div class="center">
      <template v-for="item in state.recordList" :key="item._id">
        <div class="list">
          <div class="list-top">
            <span class="num">{{ item.num }}</span>
            <span class="add">+</span>
          </div>
          <div class="list-bottom">{{ item.title }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { getRecordInfo } from '@/server/client/home'
import type { RecordDataTypes } from '@/server/client/home'

const state = reactive({
  recordList: [] as Array<RecordDataTypes>
})

const { data: recordList } = await getRecordInfo()
state.recordList = recordList.data.recordList
</script>

<style scoped lang="less">
#record {
  .center {
    width: 1200px;
    height: 243px;
    margin: 60px auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .list {
      width: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .list-top {
        position: relative;
        .num {
          color: #444444;
          font-size: 35px;
        }
        .add {
          position: absolute;
          color: #f13a3a;
          right: -20px;
          font-size: 20px;
          top: -10px;
        }
      }
      .list-bottom {
        color: #777777;
        font-size: 16px;
        margin-top: 6px;
      }
    }
  }
}
</style>
